<template>
  <div class="swiper">
    <div class="swiper-main">
      <div class="swiper-main-t">
        <ul class="banner-option">
          <li class="banner-option-li">
            <div class="option-left" style="color: #fff">
              <a class="first-tag" href="" title="HTML/CSS" style="color: #fff"
                >前端开发</a
              >
              :
              <span style="color: #fff">
                <a href="" title="html" style="color: #fff">html</a>
                /
                <a style="color: #fff" href="" title="css">css</a>/
                <a style="color: #fff" href="" title="css">javascript</a>
              </span>
              <svg class="icon" aria-hidden="true" color="#fff">
                <use xlink:href="#icon-yousanjiao3"></use>
              </svg>
            </div>
            <div class="option-active">
              <div class="option-active-r-t">
                <h3>基础知识</h3>
                <div>
                  <div style="font-weight: bold">知识点:</div>
                  <ul>
                    <li>vue.js</li>
                    <li>Typescript</li>
                    <li>React.js</li>
                    <li>HTML/CSS</li>
                  </ul>
                </div>
              </div>
              <div class="option-active-r-b">
                <ul>
                  <li>
                    <div class="course-left">
                      <img
                        src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/5730867c66074d8fa8cee8caac13dcf3.png"
                        alt=""
                      />
                    </div>

                    <div class="course-right">
                      <h3 class="title">uniapp电商+后台管理系统</h3>
                      <div class="type">中级.87人报名</div>
                      <div class="price">免费学习</div>
                    </div>
                  </li>
                  <li>
                    <div class="course-left">
                      <img
                        src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/5730867c66074d8fa8cee8caac13dcf3.png"
                        alt=""
                      />
                    </div>

                    <div class="course-right">
                      <h3 class="title">uniapp电商+后台管理系统</h3>
                      <div class="type">中级.87人报名</div>
                      <div class="price">免费学习</div>
                    </div>
                  </li>
                  <li>
                    <div class="course-left">
                      <img
                        src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/5730867c66074d8fa8cee8caac13dcf3.png"
                        alt=""
                      />
                    </div>

                    <div class="course-right">
                      <h3 class="title">uniapp电商+后台管理系统</h3>
                      <div class="type">中级.87人报名</div>
                      <div class="price">免费学习</div>
                    </div>
                  </li>
                  <li>
                    <div class="course-left">
                      <img
                        src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/5730867c66074d8fa8cee8caac13dcf3.png"
                        alt=""
                      />
                    </div>

                    <div class="course-right">
                      <h3 class="title">uniapp电商+后台管理系统</h3>
                      <div class="type">中级.87人报名</div>
                      <div class="price">免费学习</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>

          <li class="banner-option-li">
            <div class="option-left" style="color: #fff">
              <a class="first-tag" href="" title="HTML/CSS" style="color: #fff"
                >前沿技术</a
              >
              :
              <span style="color: #fff">
                <a href="" title="html/css" style="color: #fff">人工智能</a>
                /
                <a style="color: #fff" href="" title="css">物联网</a>
                /
                <a style="color: #fff" href="" title="css">大数据</a>
              </span>
              <svg class="icon" aria-hidden="true" color="#fff">
                <use xlink:href="#icon-yousanjiao3"></use>
              </svg>
            </div>
          </li>
          <li class="banner-option-li">
            <div class="option-left" style="color: #fff">
              <a class="first-tag" href="" title="HTML/CSS" style="color: #fff"
                >后端开发</a
              >
              :
              <span style="color: #fff">
                <a href="" title="html/css" style="color: #fff">koa2</a>
                /
                <a style="color: #fff" href="" title="css">php</a>
                /
                <a style="color: #fff" href="" title="css">python</a>
              </span>
              <svg class="icon" aria-hidden="true" color="#fff">
                <use xlink:href="#icon-yousanjiao3"></use>
              </svg>
            </div>
          </li>
        </ul>

        <div class="carousel">
          <el-carousel trigger="click" height="382px" autoplay>
            <el-carousel-item v-for="item in sliderList" :key="item.id">
              <img :src="item.imageUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="swiper-main-b">
        <ul>
          <li>
            <h3>
              <img src="@/assets/img/chuji.png" alt="" />
            </h3>
            <div>
              <h4>初级课程</h4>
              <span>入门快，岗位多</span>
            </div>
          </li>
          <li>
            <h3>
              <img src="@/assets/img/zhongji.png" alt="" />
            </h3>
            <div>
              <h4>中级课程</h4>
              <span>进阶如实战</span>
            </div>
          </li>
          <li>
            <h3>
              <img src="@/assets/img/gaoji.png" alt="" />
            </h3>
            <div>
              <h4>高级课程</h4>
              <span>轻松掌握核心技能</span>
            </div>
          </li>
          <li>
            <h3>
              <img src="@/assets/img/xiangmu.png" alt="" />
            </h3>
            <div>
              <h4>项目实战</h4>
              <span>手把手实践</span>
            </div>
          </li>
          <li>
            <h3>
              <img src="@/assets/img/suanfa.png" alt="" />
            </h3>
            <div>
              <h4>前端算法</h4>
              <span>笑傲前端技能</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//api
import { getSlider } from '@/api/slider'
//icon图标
import '//at.alicdn.com/t/c/font_4835797_z53cnk5uf9e.js'
import { onBeforeMount, ref } from 'vue'

interface SliderItem {
  id: number
  imageUrl: string
}

let sliderList = ref<SliderItem[]>([])
onBeforeMount(async () => {
  const res = await getSlider()
  console.log(res.data.list)
  sliderList.value = res.data.list
})
</script>

<style scoped lang="less">
// @import url("//at.alicdn.com/t/c/font_4835797_z53cnk5uf9e.css");

.swiper {
  display: flex;
  justify-content: center;
  background: linear-gradient(
    182deg,
    #e2f1ff 1.43%,
    #e7f4ff 16.32%,
    #f0f7ff 68.13%
  );
  height: 580px;
  .swiper-main {
    width: 1180px;
    height: 100%;
    margin-top: 35px;
    .swiper-main-t {
      display: flex;
      width: 1180px;
      //   background-color: skyblue;
      height: 382px;
      opacity: 1;
      border-radius: 8px;
      .banner-option {
        position: relative;
        padding: 20px 0;
        width: 330px;
        height: 342px;
        // background-color: #2b283d;
        background-color: #39364d;
        border-radius: 8px 0 0 0px;
        > li.banner-option-li {
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          overflow: hidden;
          transition: all 0.2s;

          .first-tag {
            color: #fff;
            font-size: 14px;
            // font-weight: bold;
          }
          span {
            font-size: 12px;
          }
          svg {
            position: absolute;
            height: 40px;
            // top: 10px;
            right: 5px;
            font-size: 11px;
            color: #ccc;
            line-height: 40px;
          }
          &:hover {
            background: linear-gradient(90deg, rgb(63, 229, 255), transparent);
          }
          .option-active {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            top: 0px;
            left: 258px;
            z-index: 99;
            width: 724px;
            height: 382px;
            opacity: 1;
            border-radius: 0px 8px 0px 0px;
            background-color: #fff;
            .option-active-r-t {
              padding: 23px 30px;
              height: 100px;
              h3 {
                margin-bottom: 10px;
                font-size: 16px;
                color: #1c1f21;
                line-height: 22px;
                font-weight: bold;
              }
              div {
                display: flex;
              }
              ul {
                display: flex;
                flex-wrap: wrap;
                margin-left: 7px;

                li {
                  padding: 0 10px;
                }
              }
            }
            .option-active-r-b {
              width: 724px;
              height: 100%;
              background-color: #f3f5f6;
              border-radius: 0 0 8px 0;
              display: flex;
              // justify-content: center;
              // align-items: center;
              ul {
                display: flex;
                padding: 10px 10px;
                flex-wrap: wrap;
                height: 100%;
                margin-top: 3px;
                justify-content: space-around;
                li {
                  display: flex;
                  padding: 8px;
                  width: 320px;
                  height: 90px;
                  border-radius: 8px;
                  background: #fff;
                  overflow: hidden;
                  .course-left {
                    img {
                      width: 130px;
                      height: 100%;
                    }
                  }

                  .course-right {
                    //  padding: 5px;
                    margin-left: 8px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    width: 100%;
                    //background-color: red;
                    .title {
                      font-size: 14px;
                      color: #333;
                      padding: unset;
                      height: unset;
                      font-weight: bold;
                      font-size: 12px;
                      letter-spacing: 1px;
                      //  overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      height: 20px;
                      line-height: 20px;
                    }
                    .type {
                      font-size: 12px;
                      margin: 7px 0 8px 0px;
                      letter-spacing: 1px;
                      height: 10px;
                      line-height: 10px;
                      color: #9199a1;
                    }
                    .price {
                      font-size: 12px;
                      color: #3586ff;
                      height: 20px;
                      line-height: 20px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .carousel {
        width: 100%;
        // background-color: red;
        //  border-radius: 11px;
        height: 100%;

        .el-carousel {
          height: 382px;
          color: #475669;
          opacity: 0.75;
          //  line-height: 150px;
          margin: 0;
          text-align: center;
          // :deep(.el-carousel__container) {
          //   height: 382px !important;
          // }
          img {
            width: 100%;
            height: 382px;
          }
        }
      }
    }
    .swiper-main-b {
      border-radius: 0 0 8px 8px;
      //background-color: red;
      background-color: #fff;
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
      ul {
        display: flex;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 236px;
          height: 100px;
          // background-color: #fff;
          // border-radius: 0px 0px 0px 11px;

          div {
            //   background-color: red;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-around;
            // align-items: center;
            margin-left: 11px;
            h4 {
              font-size: 18px;
              color: #333;
              font-weight: bold;
            }
            span {
              font-size: 14px;
              color: #808080;
            }
          }
          img {
            width: 64px;
            height: 64px;
          }
        }
      }
    }
  }
}
</style>
